<template>
	<view class="flex-1">
		<view class="flex-1 mx-3 mt-2 pb-9" >
			<view class="flex-1 address-item d-f border p-2 mb-3" v-for="(item,index) in addressList" :key="index">
				<view class="flex-1 ml-2 mr-5">
					<view class="font-s-35"><text
							class="mr-1 text-light-grey">地址:</text>{{ item.province_name }}{{ item.city_name }}{{ item.district_name }}{{ item.detail }}
					</view>
					<view class="font-s-35 mt-1"><text class="mr-1 text-light-grey">收货人:</text>{{ item.name }}
					</view>
					<view class="font-s-35 mt-1"><text class="mr-1 text-light-grey">联系电话:</text>{{ item.mobile }}
					</view>
				</view>
				<view class="address-operate">
					<view class="default-box row font-s-3 font-w" v-if="item.is_default">默认</view>
					<view class="default-box-1 row font-s-3" v-else>设为默认</view>
					<view class="mt-3 iconfont icon-delt2-01 row-ac justify-end" @click="modifyAddress(item.id)"></view>
					<view class="mt-3 iconfont icon-dustbin-01 row-ac justify-end" @click="deleteAddress(item.id)"></view>
				</view>
			</view>
		</view>
		<view class="flex-1 foot-box">
			<view class="botton-box flex-1 mx-8 border rounded row bg-white" @click="addAddress">
				添加地址
			</view>
		</view>
	</view>
</template>

<script>
	import request from "@/utils/request"
	import {
		addressListUrl,
		addressDeleteUrl
	} from '@/api/index.js';
	export default {
		data() {
			return {
				addressList: [],
				addressTotal:'',
				queryInfo: {
					page_size: 10
				},
			}
		},
		filters: {
			phoneFilter(val) {
				let reg = /^(.{3}).*(.{4})$/;
				return val.replace(reg, "$1****$2");
			}
		},
		created() {
			
		},
		onLoad() {
			this.init()
		},
		mounted() {
			console.log(uni.getStorageSync('token')) // 输出store中储存的token
		},
		onShow() {
			this.init()
		},
		onReachBottom() {
			this.onReachBottomHandle();
		},
		methods: {
			init() {
				this.getAddressList()
			},
			getAddressList() {
				this.$R.get(addressListUrl, this.queryInfo).then(res => {
					this.addressList = res.data.list
					this.addressTotal = res.data.total
				})
			},
			onReachBottomHandle() {
				if (this.addressTotal != this.addressList.length) {
					this.queryInfo.page_size+=10;
					this.getAddressList()
				}
			},
			deleteAddress(addressId){
				uni.showModal({
					title: '提示',
					content: '删除后不可恢复，是否删除该地址？',
					confirmText: '确认删除',
					success: (res) =>{
						if (res.confirm){
							this.$R.delete(addressDeleteUrl + addressId + '/').then(res=>{
								if(res.code == 200){
									uni.showToast({
										title: '删除成功',
										icon: 'none'
									});
									this.getAddressList()
								}
							})
						}else if (res.cancel) {
								uni.showToast({
									title: '取消删除',
									icon: 'none'
								});
							}
					}
				})
			},
			addAddress() {
				uni.navigateTo({
					url: '/pages/user/editaddress'
				})
			},
			modifyAddress(addressId) {
				uni.navigateTo({
					url: '/pages/user/editaddress?addressId=' + addressId
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #fff;
	}

	.foot-box {
		height: 92rpx;
		position: fixed;
		bottom: 50rpx;
		left: 0;
		right: 0;
		z-index: 99;

		.botton-box {
			height: 90rpx;
		}
	}

	.default-box {
		width: 120rpx;
		height: 42rpx;
		border: 1rpx solid #000;
		color: #000;
	}

	.default-box-1 {
		width: 120rpx;
		height: 42rpx;
		border: 1rpx solid #9D9D9D;
		color: #9D9D9D;
	}
	.address-operate{
		.iconfont{
			font-size: 42rpx;
		}
	}
</style>